<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>文字滚动</title>
		<script src="jquery.js"></script>
	</head>

	<body>
<article>
		<style type="text/css">
			.qimo8 {
				overflow: hidden;
				width: 200px;
			}
			
			.qimo8 .qimo {
				width: 8000%;
			}
			
			.qimo8 .qimo div {
				float: left;
			}
			
			.qimo8 .qimo ul {
				float: left;
				overflow: hidden;
				zoom: 1;
			}
			
			.qimo8 .qimo ul li {
				float: left;
			}
		</style>
		<div id="demo" class="qimo8">
			<div class="qimo">
				<div id="demo1">
					<ul>
						<li><a href='#'>创惠起点、惠及民生！</a></li>
						<li><a href='#'>让利款接收帐 副本  </a></li>
					</ul>
				</div>
				<div id="demo2"></div>
			</div>
		</div>
		<script type="text/javascript">
			var demo = document.getElementById("demo");
			var demo1 = document.getElementById("demo1");
			var demo2 = document.getElementById("demo2");
			demo2.innerHTML = document.getElementById("demo1").innerHTML;

			function Marquee() {
				if (demo.scrollLeft - demo2.offsetWidth >= 0) {
					demo.scrollLeft -= demo1.offsetWidth;
				} else {
					demo.scrollLeft++;
				}
			}
			var myvar = setInterval(Marquee, 30);
			demo.onmouseout = function() {
				myvar = setInterval(Marquee, 30);
			}
			demo.onmouseover = function() {
				clearInterval(myvar);
			}
		</script>
</article>
		<!--1、单行滚动效果-->
<article>
		<style type="text/css">
			ul,
			li {
				margin: 0;
				padding: 0
			}
			
			#scrollDiv {
				width: 300px;
				height: 25px;
				line-height: 25px;
				border: #ccc 1px solid;
				overflow: hidden
			}
			
			#scrollDiv li {
				height: 25px;
				padding-left: 10px;
			}
		</style>

		<script type="text/javascript">
			function AutoScroll(obj) {
				$(obj).find("ul:first").animate({
					marginTop: "-25px"
				}, 500, function() {
					$(this).css({
						marginTop: "0px"
					}).find("li:first").appendTo(this);
				});
			}
			$(document).ready(function() {
				setInterval('AutoScroll("#scrollDiv")', 1000)
			});
		</script>

		<div id="scrollDiv">
			<ul>
				<li>百度 www.baidu.com</li>
				<li>脚本之家 www.jb51.net</li>
				<li>这是公告标题的第三行</li>
				<li>这是公告标题的第四行</li>
				<li>这是公告标题的第五行</li>
				<li>这是公告标题的第六行</li>
				<li>这是公告标题的第七行</li>
				<li>这是公告标题的第八行</li>
			</ul>
		</div>
</article>
		<!--多行滚动效果-->
<article>
		<style type="text/css">
			ul,
			li {
				margin: 0;
				padding: 0
			}
			
			#scrollDiv {
				width: 300px;
				height: 100px;
				min-height: 25px;
				line-height: 25px;
				border: #ccc 1px solid;
				overflow: hidden
			}
			
			#scrollDiv li {
				height: 25px;
				padding-left: 10px;
			}
		</style>

		<script type="text/javascript">
			//滚动插件 
			(function($) {
				$.fn.extend({
					Scroll: function(opt, callback) {
						//参数初始化 
						if (!opt) var opt = {};
						var _this = this.eq(0).find("ul:first");
						var lineH = _this.find("li:first").height(), //获取行高 
							line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), //每次滚动的行数，默认为一屏，即父容器高度 
							speed = opt.speed ? parseInt(opt.speed, 10) : 500, //卷动速度，数值越大，速度越慢（毫秒） 
							timer = opt.timer ? parseInt(opt.timer, 10) : 3000; //滚动的时间间隔（毫秒） 
						if (line == 0) line = 1;
						var upHeight = 0 - line * lineH;
						//滚动函数 
						scrollUp = function() {
								_this.animate({
									marginTop: upHeight
								}, speed, function() {
									for (i = 1; i <= line; i++) {
										_this.find("li:first").appendTo(_this);
									}
									_this.css({
										marginTop: 0
									});
								});
							}
							//鼠标事件绑定 
						_this.hover(function() {
							clearInterval(timerID);
						}, function() {
							timerID = setInterval("scrollUp()", timer);
						}).mouseout();
					}
				})
			})(jQuery);
			$(document).ready(function() {
				$("#scrollDiv").Scroll({
					line: 4,
					speed: 500,
					timer: 1000
				});
			});
		</script>

		<p>多行滚动演示：</p>
		<div id="scrollDiv">
			<ul>
				<li>百度 www.baidu.com</li>
				<li>脚本之家 www.jb51.net</li>
				<li>这是公告标题的第三行</li>
				<li>这是公告标题的第四行</li>
				<li>这是公告标题的第五行</li>
				<li>这是公告标题的第六行</li>
				<li>这是公告标题的第七行</li>
				<li>这是公告标题的第八行</li>
			</ul>
		</div>
</article>
	</body>

</html>